<script setup lang="ts">
import { ref } from 'vue';
import { HotRecommend, QAItem } from './components';

interface Card {
    title: string;
    desc: string;
}

interface Msg {
    text: string;
    card?: Card;
    isOwner: boolean;
}
const records = ref<Msg[]>([]);
function onCardClick(card: Card) {
    console.log('卡片被点击', card);
    // 这里可以跳转、弹窗、展开详情等
}

function appendChunk(html: string) {
    const last = records.value[records.value.length - 1];
    if (!last.isOwner) {
        // 还在同一条机器人消息里拼接
        last.text += html;
    } else {
        // 上一条是用户，新建一条机器人消息
        records.value.push({ text: html, isOwner: false });
    }
    scrollToBottom();
}

const value = ref('');
const onSend = () => {
    records.value = [
        ...records.value,
        { text: value.value, isOwner: true },
        {
            text: ``,
            isOwner: false
        }
    ];
    value.value = '';
    const mock: string[] = [
        `<p style="font-size: 14px; line-height: 20px; margin-bottom: 10px">`,
        `銀座`,
        `周辺には`,
        `、高級ブラ`,
        `ンド店から百貨店、`,
        `専門店まで、`,
        `多様なショッピ`,
        `ングスポットがあります。`,
        `ここでは`,
        `主要な商業施設`,
        `をいくつかご紹介します。`,
        `<br />`,
        `主なシ`,
        `ョッピン`,
        `グスポット`,
        `</p>`,
        `<div style="display: flex; flex-wrap: wrap; gap: 10px">`,
        `<a href="https://www.baidu.com/ " style="width: 428px;display: flex;background: #ffffff33;border-radius: 12px;padding: 10px 20px 10px 16px;gap: 10px;">`,
        `<div style="flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px">`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 16px;line-height: 22px;">`,
        `洗練された大人の街を満喫！銀座ショッピングガイド洗練された大人の街を満喫！銀座ショッピングガイド</p>`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 15px;color: #a4a4a4;line-height: 21px;">`,
        `2024年11月12日`,
        `-銀座で買い物する`,
        `ならココ！`,
        `銀座のショッピング`,
        `スポット11選`,
        `1.松2024年11月12日-`,
        `銀座で買い物するならココ！銀座のショッピングスポット11選 1. 松`,
        `</p><div style="display: flex; align-items: center; gap: 6px">`,
        `<img src="https://himg.bdimg.com/sys/portrait/item/wise.1.31572216.OMELxm-umvRZJ8642W9MsA.jpg " alt="" style="width: 16px; height: 16px; border-radius: 8px; object-fit: cover"/>`,
        `<span class="font-size: 13px;">`,
        `好運日本行</span>`,
        `</div></div><div style="flex-shrink: 0">`,
        `<img src="https://cjh-ticket.cdn.bcebos.com/100i1f000001gp52l8754.jpg " alt="" style="width: 82px; height: 82px; border-radius: 8px; object-fit: cover"/></div></a>`,
        `<a href="https://www.baidu.com/ " style="width: 428px;display: flex;background: #ffffff33;border-radius: 12px;padding: 10px 20px 10px 16px;gap: 10px;"><div style="flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px">`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 16px;line-height: 22px;">洗練された大人の街を満喫！銀座ショッピングガイド洗練された大人の街を満喫！銀座ショッピングガイド</p>`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 15px;color: #a4a4a4;line-height: 21px;">2024年11月12日-銀座で買い物するならココ！銀座のショッピングスポット11選1.松2024年11月12日-銀座で買い物するならココ！銀座のショッピングスポット11選 1. 松</p>`,
        `<div style="display: flex; align-items: center; gap: 6px">`,
        `<img src="https://himg.bdimg.com/sys/portrait/item/wise.1.31572216.OMELxm-umvRZJ8642W9MsA.jpg " alt="" style="width: 16px; height: 16px; border-radius: 8px; object-fit: cover"/>`,
        `<span class="font-size: 13px;">好運日本行</span>`,
        `</div></div><div style="flex-shrink: 0">`,
        `<img src="https://cjh-ticket.cdn.bcebos.com/100i1f000001gp52l8754.jpg " alt="" style="width: 82px; height: 82px; border-radius: 8px; object-fit: cover"/></div></a>`,
        `<a href="https://www.baidu.com/ " style="width: 428px;display: flex;background: #ffffff33;border-radius: 12px;padding: 10px 20px 10px 16px;gap: 10px;">`,
        `<div style="flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px">`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 16px;line-height: 22px;">洗練された大人の街を満喫！銀座ショッピングガイド洗練された大人の街を満喫！銀座ショッピングガイド</p>`,
        `<p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 15px;color: #a4a4a4;line-height: 21px;">2024年11月12日-銀座で買い物するならココ！銀座のショッピングスポット11選1.松2024年11月12日-銀座で買い物するならココ！銀座のショッピングスポット11選 1. 松</p>`,
        `<div style="display: flex; align-items: center; gap: 6px">`,
        `<img src="https://himg.bdimg.com/sys/portrait/item/wise.1.31572216.OMELxm-umvRZJ8642W9MsA.jpg " alt="" style="width: 16px; height: 16px; border-radius: 8px; object-fit: cover"/>`,
        `<span class="font-size: 13px;">好運日本行</span>`,
        `</div></div><div style="flex-shrink: 0">`,
        `<img src="https://cjh-ticket.cdn.bcebos.com/100i1f000001gp52l8754.jpg " alt="" style="width: 82px; height: 82px; border-radius: 8px; object-fit: cover"/>`,
        `</div></a></div>`
    ];
    let idx = 0;
    const timer = setInterval(() => {
        if (idx >= mock.length) return clearInterval(timer);
        appendChunk(mock[idx++]);
    }, 120);
};

/* -------- 滚动控制 -------- */
const listRef = ref<HTMLElement>();

/* 滚动到底部（平滑） */
const scrollToBottom = () => {
    const el = listRef.value!;
    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
};
</script>

<template>
    <div class="relative h-full w-full pb-4">
        <div ref="listRef" class="flex h-full w-full flex-col gap-4 overflow-auto pr-4 pb-16">
            <div class="border-gradient2 rounded-xl p-0.5">
                <div class="rounded-xl bg-gradient-to-r from-[#2e2e2e] via-[#2e2e2e] to-[#353535] px-5 py-4 backdrop-blur-3xl">
                    <p class="text-base text-white">
                        👋Hi<br />
                        私はAIガイドのKIRINです<br />
                        観光スポット・ホテル・ショッピング・グルメなど、私に聞いてみてください。<br />
                        “銀座周辺でおすすめの人気ショッピングスポットはありますか？”<br />
                        “銀座周辺でおすすめの人気ホテルはありますか？”
                    </p>
                </div>
            </div>

            <HotRecommend />

            <QAItem
                v-for="(item, idx) in records"
                :key="idx"
                :text="item.text"
                :card="item.card"
                :isOwner="item.isOwner"
                @cardClick="onCardClick(item.card!)"
            />
        </div>

        <div class="absolute bottom-4 left-0 flex w-full items-center gap-12 bg-[#171717] pt-4 pr-4">
            <a-input class="h-[50px] flex-1" v-model:value="value" @pressEnter="onSend"></a-input>
            <a-button
                type="primary"
                shape="circle"
                class="!flex !h-[50px] w-[50px] !items-center !justify-center !bg-[#EC3A43]"
                @click="onSend"
            >
                <svg
                    t="1761732648203"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="12148"
                    width="34"
                    height="34"
                >
                    <path
                        d="M868 545.5L536.1 163c-12.7-14.7-35.5-14.7-48.3 0L156 545.5c-4.5 5.2-0.8 13.2 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
                        p-id="12149"
                        fill="#FFFFFF38"
                    ></path>
                </svg>
            </a-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.border-gradient2 {
    background: linear-gradient(93deg, #f3f4f5 0%, #5d6169 50%, #f3f4f5 100%);
}
</style>
